<template>
  <span style="overflow: auto;">
    <el-form :model="userDetailsRecord" label-position="right" label-width="120px" class="common-page-a4">
      <el-row class="m-b-10">
        <el-col :span="24">
          <h3>
            <img :src="global.getFileView(userDetailsRecord.avatar)" class="common-round-image-32" :title="userDetailsRecord.realName" style="margin-left:5px;vertical-align: middle;" @error="handleImageError">
            {{ userDetailsRecord.realName }}&nbsp;({{ userDetailsRecord.category | dictFormat }})
          </h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名:"> {{ userDetailsRecord.userName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工编号:"> {{ userDetailsRecord.userCode }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户状态:">
            <span v-if="userDetailsRecord.isLocked===0" class="color-primary">正常</span>
            <span v-if="userDetailsRecord.isLocked===1" class="color-danger">锁定</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间:"> {{ userDetailsRecord.gmtCreated | formatDate }}</el-form-item>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="user">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名:">{{ userDetailsRecord.realName }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机:">{{ userDetailsRecord.mobile }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号:">{{ userDetailsRecord.userName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别:">
                <span v-if="userDetailsRecord.gender===1">男</span>
                <span v-if="userDetailsRecord.gender===2">女</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话:">{{ userDetailsRecord.phone }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱:">{{ userDetailsRecord.email }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户类别:">{{ userDetailsRecord.category | dictFormat }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="直属主管:">{{ userDetailsRecord.reportsTo| dictFormat }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:">{{ userDetailsRecord.remarks }}</el-form-item>
            </el-col>
          </el-row>
          <div class="common-title m-b-20"><h2 class="bold">员工信息</h2></div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="内部员工:">
                <span v-if="userDetailsRecord.isInner===0" class="color-danger">否</span>
                <span v-if="userDetailsRecord.isInner===1" class="color-primary">是</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通讯录:" prop="isAddMailList">
                <span v-if="userDetailsRecord.isAddMailList===0" class="color-danger">否</span>
                <span v-if="userDetailsRecord.isAddMailList===1" class="color-primary">是</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工编号:">
                {{ userDetailsRecord.userCode }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授权码:">
                {{ userDetailsRecord.authorizationCode }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-table
            :data="userDetailsRecord.upmsOrganizations "
            style="width: 100%">
            <el-table-column prop="addTime" width="130" label="加入时间">
              <template slot-scope="scope">{{ scope.row.addTime | formatDate }}</template>
            </el-table-column>
            <el-table-column prop="type" label="标签" width="60">
              <template slot-scope="scope">
                <el-link v-if="scope.row.type==1" class="color-primary " :underline="false">机构</el-link>
                <el-link v-if="scope.row.type==2" class="color-danger" :underline="false">部门</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="organizationName" label="组织" :show-overflow-tooltip="true" min-width="180" />
            <el-table-column label="职务" prop="orgJob" width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">{{ scope.row.orgJob?(scope.row.orgJob.split(":")[1]):'' }}</template>
            </el-table-column>
            <el-table-column prop="orgPhone" :show-overflow-tooltip="true" width="160" label="电话" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="扩展信息" name="ext">
          <el-row>
            <el-col :span="12">
              <el-form-item label="民族:">{{ userDetailsRecord.nation | dictFormat }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="籍贯:">{{ userDetailsRecord.nativePlace | regionFormat }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入职时间:">{{ userDetailsRecord.startWorkDate | formatDate('yyyy-MM-dd') }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码:">{{ userDetailsRecord.idNumber }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="政治面貌:">{{ userDetailsRecord.politicalOutlook | dictFormat }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文化程度:">{{ userDetailsRecord.educationDegree | dictFormat }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="婚姻状况:">{{ userDetailsRecord.maritalStatus | dictFormat }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所学专业:">{{ userDetailsRecord.major | dictFormat }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业院校:">{{ userDetailsRecord.graduateSchool }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学位:">{{ userDetailsRecord.highestDegree }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历:">{{ userDetailsRecord.education | dictFormat }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信:">{{ userDetailsRecord.weixin }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生年月:">{{ userDetailsRecord.birthday | formatDate('yyyy-MM-dd') }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="办公电话:">{{ userDetailsRecord.phone }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急联系:">{{ userDetailsRecord.emergencyContact }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急电话:">{{ userDetailsRecord.emergencyContactMobile }} </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="现住址:">{{ userDetailsRecord.currentResidence | regionFormat }}{{ userDetailsRecord.currentAddress }}</el-form-item>
        </el-tab-pane>

        <el-tab-pane label="授权信息" name="auth">
          <el-row>
            <el-col :span="24">
              <el-form-item label="授权角色：">
                <el-tag v-for="item in userDetailsRecord.upmsRoles" :key="item.id" style="margin-right:10px">{{ item.name }}</el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="授权权限：">
                <div>共<span class="color-danger" style="margin:0 3px">{{ defaultCheckedKeys.length }}</span>个权限</div>
                <div style="max-height: 280px; overflow: auto;">
                  <el-tree
                    ref="menuTree"
                    class="common-el-tree"
                    :data="permissionData"
                    show-checkbox
                    :check-strictly="false"
                    node-key="id"
                    :default-expand-all="true"
                    :default-checked-keys="[]"
                    :expand-on-click-node="false"
                    :props="{children: 'permissionVos',label: 'name'}">
                    <span slot-scope="{ node }" class="custom-tree-node">
                      <span class="text">
                        {{ node.label }}&nbsp;
                        <span class="color-primary">&nbsp;({{ node.data.permissionValue }})</span>
                      </span>

                    </span>
                  </el-tree>
                </div>

              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="操作信息" name="cz">
          <el-row>
            <el-col :span="12">
              <el-form-item label="最后登录时间:">{{ userDetailsRecord.lastLoginTime }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后登录IP:">{{ userDetailsRecord.lastLoginAddress }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后操作时间:">{{ userDetailsRecord.lastOptionTime }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后操作描述:">{{ userDetailsRecord.lastOptionDescription }}</el-form-item>
            </el-col>
          </el-row>

        </el-tab-pane>
      </el-tabs>

    </el-form>
  </span>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'user',
      userDetailsRecord: {
        permission: [],
        role: [],
        departments: []
      },
      permissionData: [],
      defaultCheckedKeys: []

    }
  },
  methods: {
    async init(user) {
      this.activeName = 'user'
      var userLoginHistory = await this.$store.dispatch('userLoginHistoryPage', {
        userName: user.userName,
        sort: '-gmtCreated',
        limit: 1,
        page: 1
      })
      var systemOptionLog = await this.$store.dispatch('systemOptionLogPage', {
        userName: user.userName,
        sort: '-gmtCreated',
        limit: 1,
        page: 1
      })
      var userLoginHistories = userLoginHistory.records
      var systemOptionLogs = systemOptionLog.records
      this.userDetailsRecord = {
        ...user,
        lastLoginTime: userLoginHistories.length > 0 ? this.T.formatDate(userLoginHistories[0].gmtCreated) : '-',
        lastLoginAddress: userLoginHistories.length > 0 ? userLoginHistories[0].loginAddress + '(' + userLoginHistories[0].loginIp + ')' : '-',
        lastOptionTime: systemOptionLogs.length > 0 ? this.T.formatDate(systemOptionLogs[0].gmtCreated) : '-',
        lastOptionDescription: systemOptionLogs.length > 0 ? systemOptionLogs[0].description : '-'
      }
      this.fetchPermissionuTreeTable(user.id)
    },
    async fetchPermissionuTreeTable(userId) {
      const permissions = await this.$store.dispatch('permissionTreeTable', { 'sort': '+orders' })
      this.permissionData = permissions
      this.setDisabled(this.permissionData)
      const response = await this.$store.dispatch('getPermissionByUserId', userId)
      this.defaultCheckedKeys = []
      response.forEach(item => {
        this.defaultCheckedKeys.push(item.id)
      })
      this.$refs.menuTree.setCheckedKeys(this.defaultCheckedKeys)
    },
    setDisabled(treeData) {
      treeData.forEach((item) => {
        this.$set(item, 'disabled', true)
        if (item.permissionVos) {
          this.setDisabled(item.permissionVos)
        }
      })
    }
  }
}
</script>
